<template>
    <el-select style="width:155px" :disabled="disabled"   v-model="currentValue" :clearable="clearable" :placeholder="placeholder" @change="selectChange" :size="size">
        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>
    
<script setup lang='ts'>
import { ComponentInternalInstance, getCurrentInstance, onMounted,onUpdated, ref } from 'vue';
import request from "@/network/request" 
const { emit } = getCurrentInstance() as ComponentInternalInstance 
const props = defineProps({
    value: {
    type: String,
  },
  placeholder:{
    type: String,
    default:"请选择"
  },
  options: {
    type: Object,
    default: () =>({})
  },
  clearable: {
    type: Boolean,
    default: true
  },

//  远端获取 options
  useRequest: {
    type: Boolean,
    default: false
  },
  requestUrl: {
    type: String
  },
  requestData: {
    type: Object
  },

// 将select设置默认值 (未解决)
  defaultValue: {
    type: Object
  },

// 
  disabled: {
    type: Boolean,
    default: false
  },
  size: {
    type:String,
    default:"default"
  }
  

})

let selectOptions:any = ref({})

/**
 * 当前组件下的value值
 */
const currentValue = ref()

watch(() => props.value, (newValue, oldValue) => {

  currentValue.value = newValue
})

watch(() => currentValue.value, (newValue, oldValue) => {

  console.log(newValue, oldValue)
  // myemit("update:value",newValue)
})


computed(() =>{
  
})



const myemit = defineEmits(['change','update:value'])

onMounted(() =>{
    changeOptions(props.options,props.useRequest,props.requestUrl,props.requestData)
})


//如果中途修改了optiops  需要在父组件中重新调用这个方法
//直接使用props中的值会产生滞后的效果
const changeOptions = async (options:any,useRequest:Boolean,requestUrl:any,requestData:any) => {
    console.log("changeOptions",options)
    if(useRequest){
        selectOptions.value =  (await request.post(requestUrl,requestData)).singleData
    }else{
        selectOptions.value = options
        console.log("nouse",selectOptions.value)
    }
}

const selectChange = () => {
    myemit('change')
}

defineExpose({
    changeOptions
})
</script>
    
<style>

</style>